<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				background-color: rgb(245, 245, 245);
			}
			
			.header {
				width: 1000px;
				height: 120px;
				margin: 0 auto;
				overflow: hidden;
			}
			
			.logo {
				width: 85px;
				height: 40px;
				border-right: 1px solid grey;
				float: left;
				margin-top: 40px;
			}
			
			.logo img {
				width: 80px;
			}
			
			.manage {
				width: 130px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				font-size: 20px;
				color: rgb(142, 132, 228);
				float: left;
				margin-top: 40px;
			}
			
			.middle {
				width: 860px;
				height: 620px;
				margin: 0 auto;
				background-color: white;
				position: relative;
			}
			
			.center {
				width: 330px;
				margin: 60px auto 0;
				overflow: hidden;
				text-align: center;
				position: relative;
			}
			
			.center>img{
				margin-top: 50px;
				margin-bottom: 10px;
				width: 150px;
				
			}
			.text{
				color: gray;
				font-size: 25px;
			}
			form>input {
				box-shadow: 1px 1px 1px 1px #CCCCCC inset
			}
			
			
			#phone {
				width: 310px;
				height: 40px;
				font-size: 16px;
				margin-top: 40px;
				padding-left: 10px;
			}
			
			#pass{
				width: 310px;
				height: 40px;
				font-size: 16px;
				margin-top: 10px;
				padding-left: 10px;
			}
			.cuo{
				text-align: left;
				font-size: 16px;
				color: red;
				margin-top: 15px;
				display: none;
			}
			.submit {
				width: 324px;
				height: 40px;
				background-color: rgb(117, 110, 210);
				border-radius: 5px;
				font-size: 16px;
				margin-top: 20px;
				color: white;
				font-size: 16px;
				text-align: center;
				line-height: 40px;
				cursor: pointer;
			}
			
			.submit:hover {
				background-color: rgb(140, 130, 228);
			}
			
			.qita{
				margin-top: 20px;
				color: rgb(117, 110, 210);
				font-size: 14px;
			}
			
			.pic img{
				margin: 20px 20px;
			}
			.bottom{
				margin: 0 auto;
				width: 200px;
				height: 50px;
				margin-top: 80px;
				overflow: hidden;
			}
			#zhuce{
				width: 100px;
				border-right: 1px solid gray;
				float: left;
				color: rgb(117, 110, 210) ;
				cursor: pointer;
				text-decoration: none;
			}
			#zhuce:hover{
				text-decoration: underline;
			}
			#forget{
				cursor: pointer;
				color: rgb(117, 110, 210) ;
				text-decoration: none;
			}
			#forget:hover{
				text-decoration: underline;
			}
			.footer {
				font-size: 12px;
				text-align: center;
				margin-top: 50px;
			}
			
		</style>
	</head>

	<body>
		<div class="wrap">
			<div class="middle">
				<div class="center">
					<img src="img/logo-bottom.png"/>
					<div class="text">一个账户,玩转所有服务</div>
						<input type="text" name="phone" id="phone" value="" placeholder="手机号码" /><br />
						<input type="password" name="pass" id="pass" value="" placeholder="密码" /><br />
						<div class="cuo">手机号或者密码格式不对!</div>
						<div class="submit">登录</div>
					<div class="qita">____________ &nbsp;&nbsp;&nbsp;&nbsp;其他登录方式&nbsp;&nbsp;&nbsp;&nbsp;____________</div>
					<div class="pic">
						<a href="https://graph.qq.com/oauth/show?which=Login&display=pc&redirect_uri=https%3A%2F%2Faccount.putao.com%2Fsns%2Fqq%2Fcallback%3Ffrom%3Dbbs%26callback%3Dhttp%253A%252F%252Fbbs.putao.com%252Fservice%252Fcallback&client_id=101272811&scope=&response_type=code&state=qq"><img src="img/qq.png"/></a>
						<a href="https://api.weibo.com/oauth2/authorize?redirect_uri=https%3A%2F%2Faccount.putao.com%2Fsns%2Fweibo%2Fcallback%3Ffrom%3Dbbs%26callback%3Dhttp%253A%252F%252Fbbs.putao.com%252Fservice%252Fcallback&client_id=3516313564&scope=&response_type=code&state=weibo"><img src="img/weibo.png"/></a>
						<a href="https://open.weixin.qq.com/connect/qrconnect?redirect_uri=https%3A%2F%2Faccount.putao.com%2Fsns%2Fweixin%2Fcallback&scope=snsapi_login&response_type=code&state=weixin&appid=wx807a796dd7ac8106#wechat_redirect"><img src="img/weixin.png"/></a>
					</div>
					<div class="bottom">
						<a id="zhuce" href="zhuce2.php">注册账户</a>
						<a id="forget" href="">忘记密码?</a>
					</div>
				</div>
				
			</div>
			<div class="footer">版权所有© 2014-2016 葡萄科技</div>
		</div>
	</body>
    <script src="jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script>
     <script src="封装.js" type="text/javascript" charset="utf-8"></script>
    
	<script type="text/javascript">
	var cheng=0;
        var phone = document.getElementById("phone");
		var sub = document.querySelector(".submit");
        var pass = document.getElementById("pass");
		var a = document.querySelectorAll(".pic>a");
        var cuo = document.querySelector(".cuo");
		var arr2 = ["<img src='img/qq2.png'/>","<img src='img/weibo2.png'/>","<img src='img/weixin2.png'/>"];
		var arr = ["<img src='img/qq.png'/>","<img src='img/weibo.png'/>","<img src='img/weixin.png'/>"];
		for (var i = 0;i < a.length  ;i++) {
			a[i].index = i;
			a[i].onmouseover = function  () {
				var n=0;
				for (var j = 0;j < a.length  ;j++) {
					
					a[j].innerHTML = arr[n];
					n++;
				}
				this.innerHTML = arr2[this.index];
			}
			a[i].onmouseout = function  () {
                
				this.innerHTML = arr[this.index];
			}
		}
        
        
        sub.onclick = function() {       
       		var url1 = "denglu2.php?phone="+phone.value+"&pass="+pass.value;
       		var wocao = "denglu2.php?phone="+phone.value;
			ajaxFn(url1
				,function(data){
			
               if (data==0) {
               	alert("登陆失败")
               } else{
               	alert("登录成功")
                 cheng=1;
               	window.location.href="putou.php?cheng";
               }
                
			});
        }
       
	</script>

</html>

